<template>
  <transition name="bounce" mode="out-in">
    <section class="mui-content pd">
      <mh-header headName="我的订单"> </mh-header>
      <div class="mui-segmented-control mh-segmented">
        <a @click='getData(0)' class="mui-control-item mui-active"><span>全部订单</span></a>
        <a @click='getData(1)' class="mui-control-item"><span>待付款</span></a>
        <a @click='getData(2)' class="mui-control-item"><span>待发货</span></a>
        <a @click='getData(3)' class="mui-control-item"><span>待收获</span></a>
        <a @click='getData(4)' class="mui-control-item"><span>待评价</span></a>
      </div>
      <div class="o-list bg-w">
        <div class="o-item mh-pd" v-for="item in orderList" :key="item.order_id">
          <div class="o-top">
            <p class="mui-text-right status">
              <span v-if="item.status === 1">待付款</span>
              <span v-if="item.status === 2">待收货</span>
              <span v-if="item.status === 3">待发货</span>
              <span v-if="item.status === 4">待评价</span>
              <span v-if="item.status === 5">婚前服务</span>
              <span v-if="item.status === 6">相亲服务</span>
            </p>
            <div class="o-info flex" @tap="orderDetail(item.order_id)">
              <div class="info-l">
                <div class="pic-box">
                  <img :src="item.image" alt="商品图片">
                </div>
              </div>
              <div class="info-r">
                <p class="g-desc" v-text="item.name">商品名称</p>
                <p class="price" v-text="`￥${item.goods_price}`">￥-</p>
                <p class="flex-bt g-size">
                  <span>规格</span>
                  <span v-text="`x${item.specifications}`">x1</span>
                </p>
              </div>
            </div>
          </div>
          <div class="o-bottom flex-bt mh-mg-tb">
            <div class="bt-l g-total">共{{item.num}}件商品 合计：￥{{item.payment}}(含运费)</div>
            <div class="bt-r">
              <button type="button" class="btn-invert" v-if="item.status === 1">取消订单</button>
              <button type="button" class="btn-invert" v-if="item.status === 3" @tap="returnGoods(item.order_id)">退货</button>
              <button type="button" class="btn-def" v-if="item.status === 1">付款</button>
              <button type="button" class="btn-def" v-if="item.status === 2">确认收货</button>
              <button type="button" class="btn-def" v-if="item.status === 3">确认收款</button>
              <button type="button" class="btn-def" v-if="item.status === 4">待评价</button>
            </div>
          </div>
        </div>
      </div>
    </section>
  </transition>
</template>

<script>
  import MhHeader from '@/components/mh-header/mh-header'
  import {MH_API} from "@/api/api";
  export default {
    name: "my-order",
    data () {
      return {
        orderList: [
          // {
          //   id: '1',
          //   pic: 'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3396400642,3980900114&fm=11&gp=0.jpg',
          //   des: '郁金香玫瑰满天星花束套餐，送给最美丽的她',
          //   price: '198',
          //   size: 1,
          //   totalNum: 1,
          //   totalPrice: 198,
          //   status: 1
          // },
          // {
          //   id: '2',
          //   pic: 'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3396400642,3980900114&fm=11&gp=0.jpg',
          //   des: '郁金香玫瑰满天星花束套餐，送给最美丽的她',
          //   price: '198',
          //   size: 1,
          //   totalNum: 1,
          //   totalPrice: 198,
          //   status: 2
          // },
          // {
          //   id: '3',
          //   pic: 'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3396400642,3980900114&fm=11&gp=0.jpg',
          //   des: '郁金香玫瑰满天星花束套餐，送给最美丽的她',
          //   price: '198',
          //   size: 1,
          //   totalNum: 1,
          //   totalPrice: 198,
          //   status: 3
          // }
        ]
      }
    },
    methods: {
      orderDetail (id) {
        this.$router.push({path: '/profile/order/'+id, params: {id: id}})
      },
      returnGoods (id) {
        this.$router.push({path: '/profile/returnGoods', params: {id: id}})
      },
      getData(type){
        let self = this;
        let params = {
          type: type
        };
        MH_API.orderList(params).then(res => {
          if (res.status === 200) {
            self.orderList = res.data;
          }
        })
      }
    },
    components: {
      MhHeader
    },
    created(){
      this.getData(0);
    }
  }
</script>

<style lang="scss" scoped>
  @import "../../assets/css/mixin";
  .pic-box {
    margin: 0;
    @include mh-avatar-box(8.4rem, 8.4rem);
    border-radius: 0;
  }
  .o-item {border-bottom: 1px solid #eee;}
  .status {@include sc(1.2rem, #eb537f);}
  .info-r {
    margin-left: .5rem;
    .price {
      margin-bottom: .5rem;
      @include sc(1.4rem, #f26c60);
    }
  }
  .g-desc {
    margin-bottom: .5rem;
    @include sc(1.5rem, #333);
  }
  .g-size {@include sc(1.2rem, #666);}
  .g-total {@include sc(1.2rem, #666);}
  .bt-r {
    button {
      min-width: 6.2rem;
      padding: .4rem .6rem;
      border-radius: 1.1rem;
    }
    .btn-invert {
      @include sc(1.2rem, #dd65a1);
      border: 1px solid #dd65a1;
    }
    .btn-def {
      @include sc(1.2rem, #fff);
      background: #e685aa;
    }
  }

</style>
